// 生成栅格
$grid-columns: 12 !default; // 栅格数量
$grid-gutter-width: 20px !default; // 栅格间距
$grid-gutter-step-width: 5px !default; // 栅格间距-最小
$grid-gutter-tiny-width: 10px !default; // 栅格间距-极小
$grid-gutter-small-width: 15px !default; // 栅格间距-小
$grid-gutter-large-width: 30px !default; // 栅格间距-大

@mixin make-grid($columns: $grid-columns) {
  @for $i from 1 through $columns {
    .tw-grid.xgd#{$i} {
      > .tw-grid-col {
        width: percentage(1 / $i);
      }
    }
  }
}

// 栅格系统
.tw-grid {
  &:after {
    content: ' ';
    display: block;
    clear: both;
  }

  &-col {
    float: left;
    width: 100%;
    min-height: 1px;
  }
}

// 栅格系统: 中间
.tw-grid.xmiddle {
  margin: ceil($grid-gutter-width / -2);
}

.tw-grid.xmiddle > .tw-grid-col {
  padding: $grid-gutter-width / 2;
}

// 栅格系统: 最小间距
.tw-grid.xstepgutter {
  margin: ceil($grid-gutter-step-width / -2);
}

.tw-grid.xstepgutter > .tw-grid-col {
  padding: $grid-gutter-step-width / 2;
}

// 栅格系统: 极小间距
.tw-grid.xtinygutter {
  margin: ceil($grid-gutter-tiny-width / -2);
}

.tw-grid.xtinygutter > .tw-grid-col {
  padding: $grid-gutter-tiny-width / 2;
}

// 栅格系统: 小间距
.tw-grid.xsmallgutter {
  margin: ceil($grid-gutter-small-width / -2);
}

.tw-grid.xsmallgutter > .tw-grid-col {
  padding: $grid-gutter-small-width / 2;
}

// 栅格系统: 大间距
.tw-grid.xlargegutter {
  margin: ceil($grid-gutter-large-width / -2);
}

.tw-grid.xlargegutter > .tw-grid-col {
  padding: $grid-gutter-large-width / 2;
}

// 生成响应式栅格
@include make-grid();

.tw-libimglinklistbox,
.tw-libimglinklist {
  &:after {
    content: '';
    display: block;
    clear: both;
  }
}
.tw-libimglinklist-item {
  position: relative;
  display: block;
  &:after {
    content: '';
    display: block;
    clear: both;
  }
}

.tw-libimglinklist-item-box {
  position: relative;
  text-align: center;
}

.tw-libimglinklist-item-box img {
  max-width: 100%;
  max-height: 100%;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.tw-libimglinklist-item-box.xfit img {
  width: 100%;
  height: 100%;
  top: auto;
  transform: translateY(0);
}

.tw-libimglinklist-item-tit.xinner {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}

.tw-libimglinklist .tw-libimglinklist-item-tit.xellipsis {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.tw-libimglinklist-item-classfiy {
  display: inline-block;
  width: 100%;
}

// 校园风光定制样式
.tw-libimglinklist.xcustom .tw-libimglinklist-item.xleft,
.tw-libimglinklist.xcustom
  .tw-libimglinklist-item.xleft
  .tw-libimglinklist-item-box {
  height: 340px;
}

.tw-libimglinklist.xcustom .tw-libimglinklist-item.xright,
.tw-libimglinklist.xcustom
  .tw-libimglinklist-item.xright
  .tw-libimglinklist-item-box {
  height: 160px;
}

.tw-libimglinklist.xcustom .tw-libimglinklist-item-box {
  height: 160px;
  position: relative;
  &:after {
    content: '';
    display: inline-block;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 50px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
  }
}

.tw-libimglinklist.xcustom .tw-libimglinklist-item-tit.xellipsis {
  font-size: 20px;
  color: #fff;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  bottom: 10px;
  text-align: left;
  background: transparent;
  z-index: 1;
}
